<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/free.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./commpont/layui/css/layui.css">
    <link rel="stylesheet" href="./css/navright.css">
    <link rel="stylesheet" href="./css/iconfonts.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/foot.css">
    <title>免费课程</title>
</head>

<body>
    <div id="free">
        <!--头部-->
        <div class="header">
            <!--公共导航栏-->
            <div class="navtop ">
                <div class="nav mg">
                    <ul class="leftnavtop ">
                        <li><a href="../index.html">慕课网首页</a></li>
                        <li><a href="./free.html" class="only">免费课程</a></li>
                        <li><a href="./free.html">实战课程</a></li>
                        <li><a href="./job.html">就业班</a></li>
                        <li><a href="#">猿问</a></li>
                        <li><a href="./node.html">手记</a></li>
                        <li><a href="./recruit.html">猿聘</a></li>
                    </ul>
                    <ul class="rightnavtop ">
                        <li>
                            <a href="./download.html">下载App
                                <div class="download">
                                    <div class="topdown">
                                        <div class="first">
                                            <p>慕课网浏览器-pc客户端</p>
                                            <p class="radius"><i class="icon iconfont icon-windows"></i> Windows版</p>
                                            <p>Mac版开发中，敬请期待...</p>
                                        </div>
                                    </div>
                                    <div class="botdown">
                                        <p>慕课网App-随时随地学编程</p>
                                        <div class="appdown clearfix">
                                            <div class="appcode fl">
                                                <img src="./img/free/code.png" alt="">
                                            </div>
                                            <div class="appurl fr">
                                                <p class="radiu"><i class="icon iconfont icon-ios"></i> App Store下载</p>
                                                <p class="radiu"><i class="icon iconfont icon-anzhuo"></i> Android下载</p>
                                                <p>扫描下载慕课网APP</p>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="gouwuche icon iconfont icon-gouwucheman"></i>
                                购物车
                                <div class="addcar">
                                    <div class="mycar">
                                        <span>我的购物车</span>
                                        <span>已加入0门课程</span>
                                    </div>
                                    <hr>
                                    <div class="concar">
                                        <p class="icon iconfont icon-gouwucheman"></p>
                                        <p>购物车里空空如业</p>
                                        <p>快去这里选购物你中意的课程</p>
                                        <p class="red">实战课程</p>
                                        <p class="red">就业班</p>
                                    </div>
                                    <hr>
                                    <div class="footcar">
                                        <span>我的订单中心</span>
                                        <span>去购物车</span>
                                    </div>
                                </div>
                            </a>

                        </li>
                        <li><a href="#">登录</a>/<a href="#">注册</a></li>
                    </ul>

                </div>

            </div>
            <div class="navcon mg">
                <p>
                    <img src="./img/free/logo-course.png" alt="">
                    <img src="./img/free/course-top.png" alt="">
                </p>
                <a href="#">
                    <input type="text" placeholder="输入感兴趣的内容">
                    <i class="sousuo icon iconfont icon-sousuo"></i>
                </a>
            </div>
            <div class="navbot mg">
                <div class="direction">
                    <h4 class="">方向</h4>
                    <ul class="directlist ">
                        <li v-for="(item,index) in dir" :key="index">{{item.direction}}</li>
                    </ul>
                </div>
                <div class="type">
                    <div class="postype">
                        <h4 class="">分类</h4>
                        <ul class="typelist">
                            <li v-for="(item,index) in type" :key="index">{{item.type}}</li>
                        </ul>
                    </div>
                </div>
                <div class="difficulty clearfix">
                    <h4 class="fl">难度</h4>
                    <ul class="difflist fl">
                        <li v-for="(item,index) in difficulty" :key="index">{{item.difficulty}}</li>
                    </ul>
                    <a href="#"><img class="fr" src="./img/free/recommmend.png" alt=""></a>
                </div>
            </div>
        </div>
        <!--内容-->
        <div class="content">
            <div class="con">
                <div class="new">
                    <p class="contop">
                        <span>最新</span>
                        <span>最热</span>
                    </p>
                    <p class="contop">
                        <span><em>1</em>/32</span>
                        <span>
                            < </span> <span> >
                        </span>
                    </p>
                </div>
                <div class="conbox">
                    <div class="course" v-for="(item,index) in con" :key="index">
                        <a href="/views/details.html">
                            <img :src="item.pic" alt="">
                            <p class="contype">{{item.type}}</p>
                            <h3>{{item.title}}</h3>
                            <p class="numpeople">
                                <span>{{item.grade}}</span>
                                <span><i class="icon iconfont icon-04f"></i>{{item.people}}</span>
                            </p>
                            <p class="suggest"> {{item.content}}</p>
                        </a>
                    </div>
                </div>
                <div class="paging">
                    <div id="demo8"></div>
                </div>
            </div>
            
        </div>
        <!-- 侧边栏 -->
        <div class="right-nav">
            <ul>
                <li><i class="iconfont icon-fankui"></i><span>意见反馈</span></li>
                <li><i class="iconfont icon-bangzhu"></i><span>帮助中心</span></li>
                <li><i class="iconfont icon-diedaisanicon45"></i><span>app下载</span>
                    <div class="qcrapp"></div>
                </li>
                <li><i class="iconfont icon-Wchat"></i><span>官方微信</span>
                    <div class="qcrw"></div>
                </li>
                <li id="goTop" @click="backTop" :class="{'backShow':isShow}"><i class="iconfont icon-icon"></i><span>返回顶部</span></li>
            </ul>
        </div>
        <!--底部-->
        <div class="footer">
            <div class="foots">
                <div class="foot">
                    <ul class="footlist">
                        <li>网站首页</li>
                        <li>网站首页</li>
                        <li>企业合作</li>
                        <li>人才招聘</li>
                        <li>联系我们</li>
                        <li>讲师招募</li>
                        <li>常见问题</li>
                        <li>意见反馈</li>
                        <li>慕课大学</li>
                        <li>友情链接</li>
                    </ul>
                    <p>Copyright © 2018 imooc.com All Rights Reserved | 京ICP备 12003892号-11</p>
                </div>
                <div class="footpic">
                    <span></span>
                    <p class="mkwcode"></p>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </div>

    <script src="./commpont/layui/layui.js"></script>
    <script src="js/paging.js"></script>
    <!--<script src="./js/axios.min.js"></script>-->
    <script src="./js/vue.js"></script>
    <!--<script src="./js/data.js"></script>-->
    <script src="./js/freedata.js"></script>
    <script>
        let vm = new Vue({
            el: '#free',
            data() {
                return {
                    dir: [],
                    type: [],
                    difficulty: [],
                    con: [],
                    clientH: 0,
                    isShow: false,
                }
            },
            methods: {
                handleScrool() {
                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                    if (scrollTop > this.clientH) {
                        this.isShow = true;
                    } else {
                        this.isShow = false;
                    }
                },
                backTop() {
                    let timer = '';
                    clearInterval(timer)
                    timer = setInterval(() => {
                        document.body.scrollTop -= 100;
                        if (document.body.scrollTop == 0) {
                            clearInterval(timer)
                        }

                    }, 10);
                }
            },
            mounted() {
                this.clientH = document.body.clientHeight;
                window.addEventListener('scroll', this.handleScrool);
            },
            destroyed() {
                window.removeEventListener('scroll', this.handleScrool)
            },
            created() {
                // console.log(dir)
                // console.log(type)
                // console.log(difficulty)
                // console.log(con)
                this.dir = dir;
                this.type = type;
                this.difficulty = difficulty;
                this.con = con;

            }
        })
    </script>


</body>

</html>